<template>
  <div>
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>

    <!-- 点击搜索 -->
    <!-- 下面是从首页点击进来的导航页面 -->
    <div v-if="info">
      <!--点击出现的搜索页面-->
      <div>
        <van-icon name="delete" @click="delFn" />
        <!--点击删除历史记录-->
        <h6>历史记录</h6>
        <van-tag
          type="primary"
          v-for="(item, index) in historyKeywordList"
          :key="index"
          @click="qingqiuFn(item)"
        >
          {{ item }}</van-tag
        >
      </div>

      <div>
        <h6>热门搜索</h6>
        <van-tag
          type="primary"
          v-for="(item, index) in hotKeywordList"
          :key="index"
          @click="qingqiuFn(item.keyword)"
          >{{ item.keyword }}</van-tag
        >
      </div>
    </div>

    <div v-else>
      <!-- 下拉菜单 -->
      <Seach1 :Seach1Arr="Seach1Arr" @trans="transFn" @texs="texsFn"></Seach1>
      <!-- 商品 -->
      <Seach2 :Seach2Arr="Seach2Arr"></Seach2>
    </div>
  </div>
</template>
<script>
import Seach1 from "@/components/Seach1.vue";
import Seach2 from "@/components/Seach2.vue";
import { SeachFn, searchdata,DeleteData } from "@/utils/http";
export default {
  name: "Seach",
  data() {
    return {
      keyword: "", //搜索的词汇
      page: 1, //显示页数 默认1
      size: 10, //一页显示多少个
      order: "desc", // desc表示价格由高到低，asc表示价格由低到高
      categoryId: 0, //代表下拉菜单中的全部、居家等选项
      sort: "id", //id或price
      Seach2Arr: [], //出现的商品
      Seach1Arr: [], //下拉菜单商品
      info: true,
      historyKeywordList: [],
      hotKeywordList: [],
    };
  },
  created() {
    this.GetDay();
    searchdata().then((res) => {
      console.log(res);
      this.historyKeywordList = res.data.data.historyKeywordList; //历史记录数据
      this.hotKeywordList = res.data.data.hotKeywordList; //热门搜索数据 // console.log(this.hotKeywordList);
    });
  },
  components: {
    Seach1,
    Seach2,
  },
  methods: {
    //点击删除
    delFn() {
      console.log("删除");
      DeleteData().then((res) => {
        //调用清除历史记录的请求
        console.log(res); // if(res.data.errno==0){
        this.historyKeywordList = []; //历史记录需要使用的数据 //  }
      });
    },

    GetDay() {
      let parms = {
        keyword: this.keyword,
        page: this.page,
        size: this.size,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort,
      };
      SeachFn(parms)
        .then((res) => {
          console.log(res);
          this.Seach2Arr = res.data.data.data;
          this.Seach1Arr = JSON.parse(
            JSON.stringify(res.data.data.filterCategory)
              .replace(/name/g, "text")
              .replace(/id/g, "value")
          );
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //搜索时
    onSearch() {
      this.GetDay();
      //console.log('搜索了');
      this.info = false;
    },
    //取消时 跳转到home页
    onCancel() {
      this.$router.push("/home");
    },
    //切换价格高低
    transFn(m) {
      //console.log(m);
      this.order = m;
      this.sort = "price";
      this.GetDay();
    },
    //切换分类
    texsFn(n) {
      console.log(n);
      this.categoryId = n;
      this.sort = "id";
      this.GetDay();
    },
    qingqiuFn(val) {
      // console.log(this.default);
      // console.log(val);
      (this.keyword = val), //这里是点击历史记录的时候,  将历史记录的值赋值给  请求中需要的关键字
        (this.info = false); //这里是将商品列表页面显示
      this.GetDay(); //这里是发送获取商品的请求
    },
  },
};
</script>

<style scope>
</style>